<template>
  <div>
    <div class="inp">
      <el-input
        v-model="val"
        placeholder="请输入查询内容"
        autofocus
        style="width: 25%; margin-right: 10px"
      ></el-input>
      <el-button type="primary" @click="select">查询</el-button>
    </div>

    <el-table :data="tableData" border style="width: 100%" :stripe="true">
      <el-table-column prop="id" label="ID"> </el-table-column>
      <el-table-column prop="name" label="商品名称"> </el-table-column>
      <!-- 这里的数据需要二次加工 用到作用域插槽 -->
      <el-table-column prop="is_new" label="新品">
        <!-- element-ui 封装好的自定义组件 里面的插槽    scope.row 行的对象的集合 -->
        <template v-slot="scope">
          {{ scope.row.is_new ? "是" : "否" }}
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- 图片上传 用户头像上传  适用于请求参数只有一个的时候-->
    <!-- action	必选参数，上传的地址(可以为空)  headers	设置上传的请求头部   on-success	文件上传成功时的钩子-->
    <el-upload
      class="avatar-uploader"
      action="http://kumanxuan1.f3322.net:8360/admin/upload/goodNewPic"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      :headers="header"
      name="good_pic"
      >第一种上传
      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <hr />
    <!-- 图片列表缩略图   -->
    <!-- on-preview---点击文件列表中已上传的文件时的钩子   on-remove---文件列表移除文件时的钩子 -->
    <el-upload
      class="upload-demo"
      action="http://kumanxuan1.f3322.net:8360/admin/upload/goodNewPic"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      list-type="picture"
      :headers="header"
      name="good_pic"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">
        只能上传jpg/png文件，且不超过500kb
      </div>
    </el-upload>
    <hr />
    <!-- 自定义上传方式上传图片 -->
    <!-- action	必选参数，上传的地址(可以为空)  headers	设置上传的请求头部  http-request---覆盖默认的上传行为，可以自定义上传的实现 -->
    <el-upload
      class="avatar-uploader"
      action=""
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      :headers="header"
      name="good_pic"
      :http-request="uploadGoodPic"
      >自定义上传
      <img v-if="imageUrl2" :src="imageUrl2" class="avatar" />
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>

<script>
import { getGoods, UploadPicture } from "@/request/httpAPI";
import { Message } from "element-ui";
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1, //当前页数，支持 .sync 修饰符
      total: 100, //总条目数
      pageSize: 10, //一页显示的条数
      imageUrl: "", //图片地址
      imageUrl2: "",
      header: { "X-Nideshop-Token": localStorage.getItem("token") }, //请求头
      name: "", //上传的文件字段名
      val: "", //输入框的值
    };
  },
  methods: {
    // 请求获取商品列表数据
    fetchGoodsList() {
      getGoods({
        page: this.currentPage, //当前页码
        name: this.val,
        size: this.pageSize, //一页显示的条数
      }).then((res) => {
        this.tableData = res.data.data;
        this.total = res.data.count;
      });
    },
    //pageSize 改变时会触发
    handleSizeChange(size) {
      // console.log("size", size);
      this.pageSize = size;
      this.fetchGoodsList();
    },
    // currentPage 改变时会触发
    handleCurrentChange(page) {
      this.currentPage = page;
      // console.log("page", page);
      this.fetchGoodsList();
    },
    // 上传文件之前的钩子
    beforeAvatarUpload(file) {},
    // 文件上传成功时的钩子
    handleAvatarSuccess(res, file) {
      if (res.errno == 0) {
        Message({
          message: "上传成功",
          type: "success",
          duration: 1000,
        });
        this.imageUrl = res.data.fileUrl;
      } else {
        Message({
          message: "上传失败",
          type: "error",
          duration: 1000,
        });
      }
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePreview(file) {
      this.imageUrl = res.data.fileUrl;
    },
    // 文件列表移除文件时的钩子
    handleRemove(file) {},
    // 覆盖默认的上传行为，可以自定义上传的实现
    uploadGoodPic(data) {
      // data--图片的相关属性
      console.log("httprequest", data);
      let formdata = new FormData();
      formdata.append("good_pic", data.file);
      UploadPicture(formdata).then((res) => {
        if (res.errno == 0) {
          this.imageUrl2 = res.data.fileUrl;
        }
      });
    },
    //查询
    select() {
      // console.log(this.val);
      if (!this.val) {
        Message({
          message: "输入内容不允许为空",
          type: "error",
          duration: 1000,
        });
      } else {
        this.fetchGoodsList();
      }

      // this.val = "";
    },
  },
  created() {
    this.fetchGoodsList();
  },
};
</script>
 
<style lang = "less" scoped>
/* 分页 */
.el-pagination {
  width: 100%;
  margin-top: 4px;
}
/deep/ .el-upload {
  margin: 20px 0;
}
/deep/ .el-input__inner {
  margin: 0 20px 10px 0;
}
</style>